<template>
  <a-spin :spinning="isLoading">
    <a-form layout="vertical" ref="formRef" :model="formData.data">
      <a-card size="small" :title="t('school-manage.title.sendInfo')">
        <a-row v-for="(sendItem, sendIndex) in formData.data.schoolSendList"
               :key="sendIndex"
               :gutter="16"
               type="flex"
               justify="space-between"
               align="bottom"
               class="mb-15"
        >
          <a-col :span="4">
            <a-form-item :label="t('school-manage.label.receiver')" class="mb-0"
                         :name="['schoolSendList', sendIndex, 'schAddressee']"
                         :rules="[{ required: true, message: '请输入收件人' }]">
              <a-input v-model:value="sendItem.schAddressee" :placeholder="placeHolder"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item :label="t('school-manage.label.phone')" class="mb-0">
              <a-input v-model:value="sendItem.schPhone" :placeholder="placeHolder"/>
            </a-form-item>
          </a-col>
          <a-col :span="3">
            <a-form-item :label="t('school-manage.label.email')" class="mb-0">
              <a-input v-model:value="sendItem.schMailbox" :placeholder="placeHolder"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item :label="t('school-manage.label.province')" class="mb-0">
              <a-input v-model:value="sendItem.schSendProvince" :placeholder="placeHolder"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item :label="t('school-manage.label.city')" class="mb-0">
              <a-input v-model:value="sendItem.schSendCity" :placeholder="placeHolder"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item :label="t('school-manage.label.street')" class="mb-0">
              <a-input v-model:value="sendItem.schSendStreet" :placeholder="placeHolder"/>
            </a-form-item>
          </a-col>
          <a-col :span="1">
            <a-button v-if="sendIndex === 0" type="primary" ghost @click="addSendItem">{{ t('button.add') }}</a-button>
            <a-button v-else type="danger" ghost @click="deleteSendItem(sendIndex)">{{ t('button.delete') }}</a-button>
          </a-col>
        </a-row>
      </a-card>
      <a-card size="small" :title="t('school-manage.title.emailSuffix')">
        <a-form-item name="schMailboxSuffix" :rules="[{ message: '请输入', required: true }]">
          <a-input v-model:value="formData.data.schMailboxSuffix" placeholder="请输入邮箱后缀；如有多个以；隔开"/>
        </a-form-item>
      </a-card>
      <a-card size="small" :title="t('school-manage.title.overYearCalendar')">
        <a-row v-for="(calendarItem, calendarIndex) in formData.data.schCalendarYearList"
               :key="calendarIndex"
               :gutter="16"
               type="flex"
               justify="space-between"
               align="bottom"
               class="mb-15"
        >
          <a-col :span="5">
            <a-form-item :label="t('school-manage.label.term')" class="mb-0">
              <a-input v-model:value="calendarItem.schCySemester" :placeholder="placeHolder"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item :label="t('school-manage.label.beginTime')" class="mb-0">
              <a-date-picker v-model:value="calendarItem.schCyBegindate"
                             :placeholder="placeHolder"
                             valueFormat="yyyy-MM-DD"
                             type="date"
                             class="w-100p"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item :label="t('school-manage.label.testTime')" class="mb-0">
              <a-date-picker v-model:value="calendarItem.schCyExaminationdate"
                             :placeholder="placeHolder"
                             valueFormat="yyyy-MM-DD"
                             type="date"
                             class="w-100p"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item :label="t('school-manage.label.holidayTime')" class="mb-0">
              <a-date-picker v-model:value="calendarItem.schHolidaydate"
                             :placeholder="placeHolder"
                             type="date"
                             class="w-100p"
              />
            </a-form-item>
          </a-col>
          <a-col :span="1">
            <a-button v-if="calendarIndex === 0" type="primary" ghost @click="addCalendarItem">
              {{ t('button.add') }}
            </a-button>
            <a-button v-else type="danger" ghost @click="deleteCalendarItem(sendIndex)">
              {{ t('button.delete') }}
            </a-button>
          </a-col>
        </a-row>
      </a-card>
      <a-card size="small" :title="t('school-manage.title.attachmentInfo')">
        <a-form-item label="Logo" required :rules="[{ required: true, message: '请选择Logo' }]">
          <a-upload :showUploadList="false" :customRequest="data => handleUpload(data, 'logo')">
            <a-button>{{ t('button.upload') }}</a-button>
            <p v-for="item in logoFiles" :key="item.fileId" class="mt-10">
              {{ item.name }}
              <DeleteOutlined class="ml-10 cursor-pointer" @click.prevent.stop="() => handleDelUpload('logo')"/>
            </p>
          </a-upload>
        </a-form-item>
        <a-form-item :label="t('school-manage.label.pactDocument')">
          <a-upload :showUploadList="false" :customRequest="data => handleUpload(data, 'contract')">
            <a-button>{{ t('button.upload') }}</a-button>
            <p v-for="item in contractFiles" :key="item.fileId" class="mt-10">
              {{ item.name }}
              <DeleteOutlined class="ml-10 cursor-pointer" @click.prevent.stop="() => handleDelUpload('contract')"/>
            </p>
          </a-upload>
        </a-form-item>
        <a-form-item :label="t('school-manage.label.otherAttachment')">
          <a-upload :showUploadList="false" :customRequest="data => handleUpload(data, 'other')">
            <a-button>{{ t('button.upload') }}</a-button>
            <p v-for="item in otherFiles" :key="item.fileId" class="mt-10">
              {{ item.name }}
              <DeleteOutlined class="ml-10 cursor-pointer" @click.prevent.stop="() => handleDelUpload('other')"/>
            </p>
          </a-upload>
        </a-form-item>
        <a-form-item :label="t('school-manage.label.courseHeader')">
          <a-upload :showUploadList="false" :customRequest="data => handleUpload(data, 'courseHeader')">
            <a-button>{{ t('button.upload') }}</a-button>
            <p v-for="item in courseHeaderFiles" :key="item.fileId" class="mt-10">
              {{ item.name }}
              <DeleteOutlined class="ml-10 cursor-pointer" @click.prevent.stop="() => handleDelUpload('courseHeader')"/>
            </p>
          </a-upload>
        </a-form-item>
        <a-form-item :label="t('school-manage.label.courseFooter')">
          <a-upload :showUploadList="false" :customRequest="data => handleUpload(data, 'courseFooter')">
            <a-button>{{ t('button.upload') }}</a-button>
            <p v-for="item in courseFooterFiles" :key="item.fileId" class="mt-10">
              {{ item.name }}
              <DeleteOutlined class="ml-10 cursor-pointer" @click.prevent.stop="() => handleDelUpload('courseFooter')"/>
            </p>
          </a-upload>
        </a-form-item>
      </a-card>
    </a-form>
  </a-spin>
</template>

<script>
import { reactive, ref, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { upload } from "@/api/module/oss"
import { message } from "ant-design-vue"

export default {
  setup() {
    const { t } = useI18n()
    const placeHolder = '请输入'
    const isLoading = ref(false)
    const formRef = ref(null)
    const formData = reactive({
      data: {
        schoolSendList: [],
        schCalendarYearList: [],
        schMailboxSuffix: '',
        files: [],
        logo: [],
        contract: [],
        other: [],
        courseHeader: [],
        courseFooter: [],
      }
    })

    const logoFiles = computed(() => formData.data.files.filter(v => v.type === 'logo'))
    const contractFiles = computed(() => formData.data.files.filter(v => v.type === 'contract'))
    const otherFiles = computed(() => formData.data.files.filter(v => v.type === 'other'))
    const courseHeaderFiles = computed(() => formData.data.files.filter(v => v.type === 'courseHeader'))
    const courseFooterFiles = computed(() => formData.data.files.filter(v => v.type === 'courseFooter'))

    const addSendItem = () => {
      formData.data.schoolSendList.push({
        schAddressee: '',
        schPhone: '',
        schMailbox: '',
        schSendProvince: '',
        schSendCity: '',
        schSendStreet: ''
      })
    }

    const deleteSendItem = sendIndex => {
      formData.data.schoolSendList.splice(sendIndex, 1)
    }

    const addCalendarItem = () => {
      formData.data.schCalendarYearList.push({
        schCySemester: '',
        schCyBegindate: '',
        schCyExaminationdate: '',
        schHolidaydate: ''
      })
    }

    const deleteCalendarItem = sendIndex => {
      formData.data.schCalendarYearList.splice(sendIndex, 1)
    }

    const submit = () => {
      return new Promise(resolve => {
        formRef.value
          .validate()
          .then(() => {
            resolve(formData.data)
          })
      })
    }

    const handleUpload = (data, type) => {
      isLoading.value = true
      const ajaxFormData = new FormData()
      ajaxFormData.append('file', data.file)
      upload(ajaxFormData).then(res => {
        if (res.code === 500) {
          message.error({ content: '上传图片失败' })
        } else {
          const { path: url, id: fileId, remark, name } = res.data
          formData.data.files.push({ type, url, fileId, remark, name })
        }
        isLoading.value = false
      })
    }

    const handleDelUpload = type => {
      formData.data.files = formData.data.files.filter(v => v.type !== type)
    }

    const updateFormData = data => {
      formData.data = data
      formData.data.schoolSendList.length === 0 && addSendItem()
      formData.data.schCalendarYearList.length === 0 && addCalendarItem()
    }

    onMounted(() => {
      addSendItem()
      addCalendarItem()
    })

    return {
      t,
      placeHolder,
      formRef,
      formData,
      isLoading,
      logoFiles,
      contractFiles,
      otherFiles,
      courseHeaderFiles,
      courseFooterFiles,
      addSendItem,
      deleteSendItem,
      addCalendarItem,
      deleteCalendarItem,
      submit,
      updateFormData,
      handleUpload,
      handleDelUpload,
    }
  }
}
</script>
